<template>
  <div id="limite-detail">
    <div class="container">
      <mt-swipe :auto="4000" :show-indicators="false" style="height: 225px;">
        <mt-swipe-item>
          <img :src="selectedGood.imgs"/>
          <i class="iconfont">&#xe67f;</i>
          <span v-show="imgecounts >1">1/{{imgecounts}}</span>
        </mt-swipe-item>
        <mt-swipe-item>
          <img :src="selectedGood.imgs"/>
          <i class="iconfont">&#xe67f;</i>
          <span v-show="imgecounts >1">2/{{imgecounts}}</span>
        </mt-swipe-item>
      </mt-swipe>
      <section>
        <aside style="flex: 1;" class="tl pr30">
          <p class="f20" style="font-weight: 500;">120</p>
          <p class="f13" style="margin-top:-8px;color: #FFE749;">人免费拿</p>
        </aside>
        <aside style="flex: 1;" class="tc">
          <p class="f12">价值</p>
          <p class="f16">￥{{selectedGood.originalprice}}</p>
        </aside>
        <aside class="stock tc">
          <p class="f12">剩余时间</p>
          <p class="f16" style="font-weight: normal;">03:23:05</p>
        </aside>
      </section>
      <main>
        <header class="pl13-pt13">
            <h1 class="f16 pt5" style="font-weight: 600">{{selectedGood.nam}}套餐</h1>
            <ol class="pt5 pb5">
              <li v-for="(guige, key) in selectedGood.selectedGoods" :key="guige.index" class="pr10 f13" style="color: #747474">
                {{key+1}}.<span class="f14">{{guige.guige}}</span>
              </li>
            </ol>
        </header>
        <section class="h50">
        </section>
        <main v-show="!selected">
          <section><p class="f14">已砍价<span>¥52.03</span></p><p class="f14 tr">还剩<span>¥128.08</span></p></section>
          <mt-progress :value="progress" :bar-height="10"></mt-progress>
          <p class="mt10 f14 tc" style="color: #747474;">支付开团并邀请<span style="color:#F54727;">3</span>人参与，人数不齐自动退款</p>
          <mt-button class="mt15" size="large" type="danger">请好友帮忙砍一刀</mt-button>
        </main>
        <dl v-show="!selected" class="mt5 pl13-pt13 pb5">
          <dt class="f14 tc">好友砍价帮</dt>
          <dd>
            <img src="./renwu.png"/>
            <aside class="pl13" style="color: #747474;">
              <p class="f13">Smyalover</p>
              <p class="f12">砍价全靠我吼一声</p>
            </aside>
            <button class="f12 tc">
              <p>已砍掉</p>
              <p class="f16">¥ 7.85</p>
            </button>
          </dd>
          <dd>
            <img src="./renwu.png"/>
            <aside class="pl13" style="color: #747474;">
              <p class="f13">Smyalover</p>
              <p class="f12">砍价全靠我吼一声</p>
            </aside>
            <button class="f12 tc">
              <p>已砍掉</p>
              <p class="f16">¥ 25.98</p>
            </button>
          </dd>
        </dl>
        <div class="goods-script">
          <h4>商品详情</h4>
          <p>{{selectedGood.describe}}</p>
        </div>
      </main>
    </div>
    <footer>
      <button>
        砍价商品
      </button>
      <button style="background: #41B962; color: #fff" @click="showShare = true">
        <span v-if="selected">砍价免费拿</span>
        <span v-else>继续砍价</span>
      </button>
    </footer>
    <mt-popup v-model="showShare">
      <fieldset>
        <h1 class="mt5">25.05<span>¥</span></h1>
        <p class="f14">你已砍了</p>
        <p class="f13">让微信好友,帮您多砍一刀</p>
        <hr/>
        <p class="f14 mt5" style="color: #F6400D">剩余时间</p>
        <aside>
          <mt-badge size="normal" color="#646464">03</mt-badge>
          <i class="iconfont">:</i>
          <mt-badge size="normal" color="#646464">25</mt-badge>
          <i class="iconfont">:</i>
          <mt-badge size="normal" color="#646464">09</mt-badge>
        </aside>
        <mt-button size="large" type="danger">立即分享</mt-button>
        <section>
          <span></span>
          <p @click="showShare = false">X</p>
        </section>
      </fieldset>
    </mt-popup>
  </div>
</template>

<script type="ECMAScript 6">
  import addDecrsde from '@/components/add-decrside-button/add-decrsde';
    export default {
        name: 'limite-detail',
      components: {
          addDecrsde
      },
      data () {
        return {
          imgecounts: 2,
          id: this.$route.query.goodId,
          selected: this.$route.query.selected,
          loading: false,
          istrue: 0,
          text: '',
          progress: 0,
          selectedGood: {},
          value3: 0,
          counts: 0,
          buttonSize: 'small',
          show: true,
          showProgress: 0,
          showShare: false
        };
      },
      created () {
        this.$store.state.showBottomNav = false;
        this.fetchData();
        this.showProgress = setInterval(() => {
              if (this.progress <= 100) {
                this.progress++;
              } else {
                this.progress = 0;
              }
            }, 1000);
      },
      beforeDestroy () {
        clearInterval(this.showProgress);
      },
      methods: {
        getMount (stocks) {
          this.selectedGood = stocks;
        },
        fetchData () {
          this.loading = true;
          // 拿到查询字段，商品的id后进行http请求
          this.$http.get('/api/good' + this.id)
            .then(response => {
              this.selectedGood = response.data.data;
              this.$set(this.selectedGood, 'counts', 0);
            }, error => {
              console.log(error);
            });

          this.loading = false;
          }
        }
      };
</script>

<style lang="stylus" scoped>
  #limite-detail
    .container
        padding-bottom 55px;
        .mint-swipe-item
          position relative;
          img
            width 100%; height 100%;
          i
            position absolute; top 11px; right 13px; display inline-block; width 35px; height 35px;line-height 35px; border-radius 50%; text-align center; background rgba(0,0,0,0.6);color #fff;
          span
            position absolute; right 13px; bottom 13px; display inline-block; min-width 40px; height 25px; font-size 12px; color white; text-align center; line-height 27px; border-radius 13px;background rgba(0,0,0,0.6);
        &>section
          display flex; align-items center; padding 0 0 0 13px; width 100%;height 55px;  background #41B962; color #fff;
          .stock
             width 41%; padding  6px 0; background rgba(0,0,0,0.08);
        main
          header
            background #fff;
            ol
              display flex; flex-flow wrap;
          &>section
            display flex; align-items center; background:linear-gradient(90deg,rgba(249,115,53,1),rgba(246,88,44,1));
            .buttons
                position relative; flex 1; height 50%;
          &>main
            padding 20px 37px; background #fff;
            section
              display flex; align-items center; background #fff;
              p
                flex 1;
                span
                  color #F86D33;
            .mint-button
              border-radius 20px; border-bottom 3px solid #38A055; line-height 38px;
            .mint-button--danger
              background #41B962;
          dl
            background #fff;
            dt
              width 100%; padding: 10px 0;text-align center;
            dd
              display flex; align-items center; height 50px; margin  5px 0; border-top 1px solid #F86A32; border-bottom 1px solid #F86A32; border-radius 25px;
              img
                width 50px; height 50px; border-radius 50%;
              aside
                flex 1;
              button
                 min-width 100px; height 50px; background #F86A32; border-radius 0 25px 25px 0; color #fff;
          .goods-script
             margin-top 5px; padding 17px 13px; background #fff
             h4
               font-size 15px; font-weight 500
             p
               margin-top 10px; font-size 12px; color #A2A2A2
    footer
      position fixed; display flex; align-items center; bottom 0; left 0 ; width 100%;  height 50px; background #fff
      button
        flex 1; height 100%; font-size 16px; text-align center;
    .mint-popup
        width 300px; background transparent;
        fieldset
           position relative; width: 100%; min-height: 245px; background: url("./share-limit.png") center no-repeat; background-size: contain;border none;
          h1
            font-size 30px; text-align center; font-weight 500; color #F74817;
            span
              font-size 20px; vertical-align text-top;
          p
             color #747474; text-align center;
          hr
            margin: 0 auto; margin-top 2%; width: 51%; background: transparent; color: transparent; border-top: 2px dotted  #E73908;
          aside
            display: flex; align-items: center; justify-content: center;
          i
            padding 0 4px;
          .is-size-normal
            border-radius 3px; width 26px; height 26px; padding 0; text-align center; line-height 26px;
          .mint-button
            border-radius 20px;
          .mint-button--large
            margin: 0 auto; margin-top 40px;width: 57%;
          .mint-button--danger
            background #F7D416;
          section
            position absolute; right 0; bottom -24%; width 100%; text-align center;
            span
              display: inline-block; height: 23px; text-align center; border-right: 3px dotted #fff;
            p
              display:block !important; margin: 0 auto; width: 25px; height: 25px; border: 2px solid #fff; border-radius: 50%; font-size: 10px; line-height: 21px; color: #fff; text-align: center;
</style>

<style lang="stylus">
    .mt-progress-runway
      border-radius 5px;
    .mt-progress-progress
      border-radius 5px; background #F86E33;
</style>
